<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>宝邯运输</title>
    <link rel="shortcut icon" href="<%=path%>/staticfavicon.ico">
    <link href="<%=path%>/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/static/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="<%=path%>/static/layui/css/layui.css" rel="stylesheet">
    <link href="<%=path%>/static/myTreeTable/module/treetable-lay/treetable.css" rel="stylesheet">
</head>

<body>
    <input id="windowType" value="depart" type="hidden"/>
    <!--内容开始-->
    <div class="layui-fluid" style="margin-top: 10px;">
        <div id="searchCard" class="layui-card"
            style="border-radius:20px;display: none;align-items: center;;box-shadow: 10px 10px 5px #cccccc;">
            <div class="layui-card-body" style="height: 60px">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:100px">部门名称：</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" id="findValue" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label" style="width:100px">部门状态：</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <select id="findState" lay-verify="">
                                    <option value="" selected>所有</option>
                                    <option value="0">正常</option>
                                    <option value="1">禁用</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="margin-left: 20px;">
                                <button class="layui-btn "
                                    style="background-color: #1AB394;color: white;border-radius:10px" id="find">搜索</button>
                                <button class="layui-btn "
                                    style="background-color: #F8AC59;color: white;border-radius:10px" id="reSet">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-fluid" style="margin-top: 15px;">
        <div class="layui-card" style="border-radius:20px;box-shadow: 10px 10px 5px #cccccc;padding: 5px;">
            <div class="layui-card-body">

                <div class="layui-row">
                    <table class="layui-hide" id="menu" lay-filter="menu"></table>
                    <div class="xm">
                        <div class="xm-d1">
                            <p class="xm-d1-p"></p>
                        </div>
                        <div class="xm-d2">
                            <div class="xm-d2-hang1">
                                <span class="pzright"
                                    style="display: flex;justify-content: flex-start;float:left;margin: 5px;">
                                    <p class="xm-d1-p2">
                                        <button id="add" class="layui-btn-sm layui-btn layui-btn-radius btnys"
                                            style="background-color: #1C84C6;color: white;"><i
                                                class="layui-icon">&#xe608;</i>添加</button>
                                        <button class="layui-btn layui-btn-sm" id="btn-expand"
                                            style="background-color: #1AB394;color: white;">全部展开</button>
                                        <button class="layui-btn layui-btn-sm" id="btn-fold"
                                            style="background-color: #1AB394;color: white;">全部折叠</button>
                                    </p>
                                </span>
                                <span class="layui-btn-group"
                                    style="float: right;display: flex;justify-content: flex-start;margin: 5px;">
                                    <button id="btn-refresh" type="button" class="layui-btn "
                                        style="background-color:white;border: 1px solid #DDDDDD;border-radius:10px 0 0 10px;color: #bbbbbb;size: 10px;"><i
                                            class="fa fa-refresh"></i></button>
                                    <button id="show-search" type="button" class="layui-btn "
                                        style="background-color:white;border: 1px solid #DDDDDD;border-radius:0 10px 10px 0;color: #bbbbbb;size: 10px;"><i
                                            class="fa fa-search"></i></button>

                                </span>
                            </div>
                            <div class="xm-d2-hang2">
                                <table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--内容结束-->

<!-- 全局js -->
<script src="<%=path%>/static/layui/layui.all.js"></script>
<script src="<%=path%>/static/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=path%>/static/js/bootstrap.min.js?v=3.3.6"></script>
<script src="<%=path%>/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="<%=path%>/static/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="<%=path%>/static/js/plugins/layer/layer.min.js"></script>
<script src="<%=path%>/static/js/hplus.js?v=4.1.0"></script>
<script src="<%=path%>/static/js/contabs.js"></script>
<script src="<%=path%>/static/js/plugins/pace/pace.min.js"></script>
<script src="<%=path%>/static/myjs/MyLayer.js"></script>
<!--lay-event指定事件-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add" style="width:57px;height:22px;background-color:#1C84C6"><i class="layui-icon">&#xe608;</i>新增</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" style="width:57px;height:22px"><i class="fa fa-pencil-square-o"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" lay-event="del" style="width:57px;height:22px"><i class="fa fa-trash-o" ></i>删除</a>
  </script>
<script>
    var dataUrl="<%=path%>/system/dept/list"
    $("#show-search").click(function () {
        let display = $("#searchCard").css("display")
        if (display == "none") {
            $("#searchCard").css("display", "block")
            $("#searchCard").animate({ opacity: "1" }, 1000)
        } else {
            $("#searchCard").animate({ opacity: "0" }, function () {
                $("#searchCard").css("display", "none")
            })
        }

    })
    //查找
    $("#find").click(()=>{
        let enable=$("#findState").val();
        let name=$("#findValue").val();
        if (name===""&&enable===""){
            dataUrl="<%=path%>/system/dept/list"
        }else{
            dataUrl="<%=path%>/system/dept/find?enable="+enable+"&deptName="+name
        }
        renderTable();
        return false
    })
    //重置
    $("#reSet").click(()=>{
        dataUrl="<%=path%>/system/dept/list"
        renderTable();
        return false
    })
    var layer=window.top.layer;
    var renderTable
    /*使用模块加载的方式 加载文件*/
    layui.config({
        base: '<%=path%>/static/myTreeTable/module/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        treetable = layui.treetable;

        // 渲染表格
        renderTable = function () {
            //获取数据并预处理
            $.getJSON(dataUrl, (res) => {
                let data;
                if (res.msg !== "ok") {
                    data = []
                } else {
                    data = res.data
                }
                //如果是查询，则改为同级
                if (dataUrl.indexOf("find") > 0) {
                    for (let dept of data) {
                        dept.parentId = 0
                    }
                }
                treetable.render({
                    treeColIndex: 1,//树形图标显示在第几列
                    treeSpid: 0,//最上级的父级id
                    treeIdName: 'id',//id字段的名称
                    treePidName: 'parentId',//pid字段的名称
                    treeDefaultClose: false,//是否默认折叠
                    treeLinkage: true,//父级展开时是否自动展开所有子级
                    elem: '#permissionTable',
                    data: data,
                    page: false,
                    cols: [[
                        {type: 'numbers', title: 'id', width: 50, align: 'center'},
                        {field: 'name', title: '部门名称'},
                        {field: 'sort', title: '排序', width: 60, align: 'center'},
                        {field: 'personCount', title: '人数', width: 60, align: 'center'},
                        {field: 'description', title: '描述'},
                        {
                            field: 'principal', title: '负责人', width: 80, align: 'center',
                            templet: function (data) {
                                return data?.principal?.name === undefined ? "" : data.principal.name;
                            }
                        },
                        {
                            field: 'enable', title: '状态', width: 80, align: 'center',
                            templet: function (data) {
                                let res1 = `<div style="height:25px;color:white;line-height:25px;width:50px;text-align:center;background-color: #1AB394;border-radius: 5px;display: inline-block;">正常</div>`;
                                let res2 = `<div style="height:25px;color:white;line-height:25px;width:50px;text-align:center;background-color: #ED5565;border-radius: 5px;display: inline-block;">禁用</div>`;
                                return data.enable == 0 ? res1 : res2;
                            }
                        },
                        {title: '操作', toolbar: '#barDemo', minWidth: 250}
                    ]],
                    done: function () {
                        //关闭加载转圈
                        layer.closeAll('loading');
                    }
                })
            })
        };

        renderTable();
        //触发添加
        $("#add").click(function () {
            layer.closeAll('iframe')
            MyLayer.iframeLayer(layer, "新增部门", "<%=path%>/system/department/departmentInput?type=add&id=" + 0, {
                "保存": formSubmit
            }, "middle", () => {
                setTimeout(renderTable, 500)
            })
        })

        //触发展开
        $('#btn-expand').click(function () {
            treetable.expandAll('#permissionTable');
        });
        //触发折叠
        $('#btn-fold').click(function () {
            treetable.foldAll('#permissionTable');
        });
        //刷新
        $('#btn-refresh').click(function () {
            renderTable()
        });

        //监听工具条
        table.on('tool(permissionTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            //删除
            if (layEvent === 'del') {
                MyLayer.confimDeleteLayer(layer,function (index) {
                    let res=false;
                    $.ajax({
                        url:"<%=path%>/system/dept/remove",
                        data:{id:data.id},
                        async:false,
                        success:function (data) {
                          if(data.msg==="ok"){
                              res=true
                              renderTable()
                              layer.close(index)
                              return
                          }
                          layer.msg(data.msg)
                        }
                    })
                })
               
            } else if (layEvent === 'edit') {
                layer.closeAll('iframe')
                let layerObj=MyLayer.iframeLayer(layer, "修改部门", "<%=path%>/system/department/departmentInput?type=edit&id="+data.id, {
                    "保存": formSubmit
                },"middle",()=>{
                    setTimeout( renderTable,500)
                })
            } else if (layEvent === 'add') {
                layer.closeAll('iframe')
                let layerObj=MyLayer.iframeLayer(layer, "新增部门", "<%=path%>/system/department/departmentInput?type=parentAdd&id="+data.parentId, {
                    "保存": formSubmit
                },"middle",()=>{
                    setTimeout( renderTable,500)
                })
            }
        });
    });
    //提交，点击ifrme内提交按钮，监听关闭弹窗
    function formSubmit(index) {
        let formSubmit=layer.getChildFrame('#departSubmit', index);
        $(formSubmit).click();
        return false
    }
    function getData() {

    }

</script>
</body>

</html>